<template>
	<div class="cateIndexShow">
		<div class="item" v-for="item in cate" @click="emits('item-click',item)">
			<img :src="item.icon" alt="" v-if="item.icon">
			<span>{{item.name}}</span>
		</div>
	</div>
</template>

<script setup>
	defineProps({
		cate:{
			type:Array,
			required:true
		}
	})
	
	const emits = defineEmits(['item-click'])
	
</script>

<style>
	.cateIndexShow{
		width: 100%;
		padding: 10px;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		.item{
			width: 50px;
			height: 80px;
			margin:5px 10px;
			/* background-color: aquamarine; */
			text-align: center;
			& img{
				
				width: 50px;
				height: 50px;
				border-radius: 50%;
				
			}
			& span{
				
				font-size: 12px;
				
			}
		}
	}
	

</style>